<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes,
  watchEffect,
  watch,
  getCurrentInstance
} from 'vue'
import { ElImage } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject,
  searchParentByClassName
} from './utils'
export const oImageSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  options: {
    type: Array<string>,
    default: () => new Array<string>()
  },
  center: {
    type: Boolean,
    default: false
  },
  ...IgnoreProps
}
export const oImageProps = {
  ...ElImage.props,
  ...oImageSelfProps
}
export type oImagePropsType = ExtractPropTypes<typeof oImageProps>
const oImage = defineComponent({
  name: 'one-image',
  props: oImageProps,
  components: { ElImage },
  setup(props: oImagePropsType, context) {
    const inProps = omitSelfProps<oImagePropsType, typeof oImageSelfProps>(
      props,
      oImageSelfProps
    )
    watchEffect(() => {
      const src = props.formData![props.prop!]
      if (!props.options || !props.options.length) {
        props.options.push(src)
      }
    })
    const refImage = ref<InstanceType<typeof ElImage>>()
    const ins = getCurrentInstance() // {ctx} this对象
    // onShow={() => (ins as any).components.ElImage.mixins[0].methods.onShow()}
    const onShow = function () {
      let node = searchParentByClassName(refImage.value?.$el, 'el-table__cell')
      if (node) {
        node.style.zIndex = '99999'
      }
    }
    const onClose = function () {
      let node = searchParentByClassName(refImage.value?.$el, 'el-table__cell')
      if (node) {
        node.style.zIndex = ''
      }
    }
    return () => (
      <ElImage
        onShow={onShow}
        onClose={onClose}
        {...inProps}
        class={{ [oImage.name]: true, 'one-picture-center': props.center }}
        src={props.formData![props.prop!]}
        zoom-rate={1.2}
        previewSrcList={props.options}
        v-slots={context.slots}
        fit="fill"
        lazy
        ref={refImage}
      ></ElImage>
    )
  }
})
export default oImage
</script>
<style lang="scss" scoped>
.one-picture {
  width: 100%;
  height: 100px;
}
</style>
